/* eslint-disable no-return-assign */
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Input, Button, Select } from 'antd';
import MySelf from './MySelf.jsx';
import ImageBox from '@/components/ImageBox';
import IconSelect from '@/components/IconSelect';

class Page extends Component {
  constructor(props) {
    super(props);

    this.state = {
      arr: [
        'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
        'http://www.whzcxx.net/controls/kindeditor/up/image/20180408/20180408164755_9099.jpg',
        'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
      ],
    };
  }

  componentDidMount() {
    this.myform.setFieldsValue({
      self: {
        input1: 'abc',
        input2: '345',
      },
      username: 'haozhi',
      // images: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    });
  }

  render() {
    return (
      // <Form ref={_ => this.myform = _} layout="vertical" onFinish={(stores) => {
      //   console.log("值", stores)
      // }}>
      <PageHeaderWrapper>
        <Form
          ref={(_) => (this.myform = _)}
          layout="vertical"
          onFinish={(stores) => {
            console.log(stores);
          }}
        >
          <Form.Item label="用户名" name="username" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            label="自定义"
            name="self"
            // validateTrigger={['onBlur']}
            rules={[
              {
                required: true,
                validator: (_, value) => {
                  const { input1, input2 } = value;
                  if (input1 === '' || input2 === '') {
                    // eslint-disable-next-line prefer-promise-reject-errors
                    return Promise.reject('请输入自定义');
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <MySelf />
          </Form.Item>
          {/* <Form.Item label="封面图片" name="images" rules={[{ required: true }]}>
            <ImageBox arr={this.state.arr} />
          </Form.Item> */}
          <Form.Item label="图标" name="icon" rules={[{ required: true }]}>
            <IconSelect style={{ minWidth: 200 }} url={require("@/utils/config").scriptUrl} />
          </Form.Item>
          <Form.Item label="选择" name="select" >
            <Select mode="multiple" options={[
              { label: "abc", value: 1 },
              { label: "efg", value: 2 },
              { label: "hig", value: 3 },
            ]} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" >
              Submit
            </Button>
          </Form.Item>
        </Form>
        <br />

        <button
          onClick={() => {
            this.setState({
              arr: [
                'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
                'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
                'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png',
              ],
            });
          }}
          type="button"
        >
          点击我
        </button>
      </PageHeaderWrapper>
    );
  }
}
export default Page;
